---
title: Accordion
description: A vertically stacked set of interactive headings that each reveal a section of content.
---

{/* prettier-ignore-start */}
{/* prettier-ignore-end */}

import Code from '@/components/Code.astro';
import { LinkButton } from '@/components/react/LinkButton';
import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
import importedCode from '@rnr/reusables/components/ui/accordion?raw';

<LinkButton href="https://rn-primitives.vercel.app/accordion">
  Accordion Primitive
</LinkButton>
<LinkButton href="/components/text">
  Text Component
</LinkButton>
<LinkButton target="_blank" href="https://rnr-showcase.vercel.app/accordion">
  Demo
</LinkButton>

<br />

A vertically stacked set of interactive headings that each reveal a section of content.

### Installation

<Tabs>
  <TabItem label='CLI'> 
    ```bash
    npx @react-native-reusables/cli@latest add accordion
    ```
  </TabItem>
  <TabItem label='Manual'>
    <Aside type="tip" title="Dependencies">
        Before copy/pasting, add the <a href="https://rn-primitives.vercel.app/accordion" className='text-white font-bold'>accordion primitive</a> and the <a href="/components/text" className='text-white font-bold'>text component</a> to your project.
    </Aside>

    <br />

    **Copy/paste the following code to `~/components/ui/accordion.tsx`:**


    <Code code={importedCode} lang="tsx" title="~/components/ui/accordion.tsx" />
  </TabItem>
</Tabs>

### Usage

```tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '~/components/ui/accordion';
import { Text } from '~/components/ui/text';

function Example() {
  return (
      <Accordion
        type='multiple'
        collapsible
        defaultValue={['item-1']}
        className='w-full max-w-sm native:max-w-md'
      >
        <AccordionItem value='item-1'>
          <AccordionTrigger>
            <Text>Is it accessible?</Text>
          </AccordionTrigger>
          <AccordionContent>
            <Text>Yes. It adheres to the WAI-ARIA design pattern.</Text>
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value='item-2'>
          <AccordionTrigger>
            <Text>What are universal components?</Text>
          </AccordionTrigger>
          <AccordionContent>
            <Text>
              In the world of React Native, universal components are components that work on both
              web and native platforms.
            </Text>
          </AccordionContent>
        </AccordionItem>
      </Accordion>
  );
}
```
## Props

### Accordion

Extends [`View`](https://reactnative.dev/docs/view#props) props

|     Prop      |                          Type                           |           Note            |
| :-----------: | :-----------------------------------------------------: | :-----------------------: |
|    type\*     |                 'single' \| 'multiple'                  |                           |
|    asChild    |                         boolean                         |       _(optional)_        |
| defaultValue  |            (string \| undefined) \| string[]            |       _(optional)_        |
|     value     |            (string \| undefined) \| string[]            |       _(optional)_        |
| onValueChange | ((string \| undefined) => void) \| ((string[]) => void) |       _(optional)_        |
|      dir      |                     'ltr' \| 'rtl'                      | **Web only** _(optional)_ |
|  orientation  |               'vertical' \| 'horizontal'                | **Web only** _(optional)_ |

### AccordionItem

Extends [`View`](https://reactnative.dev/docs/view#props) props

|   Prop   |  Type   |     Note     |
| :------: | :-----: | :----------: |
| asChild  | boolean | _(optional)_ |
|  value   | string  | _(optional)_ |
| disabled | boolean | _(optional)_ |

### AccordionTrigger

Extends [`Pressable`](https://reactnative.dev/docs/pressable#props) props

|  Prop   |  Type   |     Note     |
| :-----: | :-----: | :----------: |
| asChild | boolean | _(optional)_ |

### AccordionContent

Extends [`View`](https://reactnative.dev/docs/view#props) props

|    Prop    |       Type        |     Note     |
| :--------: | :---------------: | :----------: |
|  asChild   |      boolean      | _(optional)_ |
| forceMount | true \| undefined | _(optional)_ |